<template>
  <transition name="show">
    <div class="location_container">
      <!-- <div class="column1_container">
        <el-row v-for="(item, index) in GuHaLocation.Column1" :key="index">
          <el-col :span="24">
            <div
              class="statistics"
              :class="
                item.status === 'white'
                  ? 'bg_style1'
                  : item.status === 'yellow'
                  ? 'bg_style2'
                  : item.status === 'green'
                  ? 'bg_style3'
                  : item.status === 'flicker'
                  ? 'green_flicker'
                  : item.status === 'red'
                  ? 'bg_style4'
                  : ''
              "
            >
              <div class="title">
                <p>{{ item.location_name }}</p>
              </div>
              <div class="info_container">
                <span>零件号: {{ item.detailNo }}</span>
                <span>零件数量: {{ item.detail_quantity }}</span>
                <span>入库时间: {{ item.putUp_time }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="column2_3">
        <div class="column2_container">
          <el-row v-for="(item, index) in GuHaLocation.Column2" :key="index">
            <el-col :span="24">
              <div
                class="statistics"
                :class="
                  item.status === 'white'
                    ? 'bg_style1'
                    : item.status === 'yellow'
                    ? 'bg_style2'
                    : item.status === 'green'
                    ? 'bg_style3'
                    : item.status === 'flicker'
                    ? 'green_flicker'
                    : item.status === 'red'
                    ? 'bg_style4'
                    : ''
                "
              >
                <div class="title">
                  <p>{{ item.location_name }}</p>
                </div>
                <div class="info_container">
                  <span>零件号: {{ item.detailNo }}</span>
                  <span>零件数量: {{ item.detail_quantity }}</span>
                  <span>入库时间: {{ item.putUp_time }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="column3_container">
          <el-row v-for="(item, index) in GuHaLocation.Column3" :key="index">
            <el-col :span="24">
              <div
                class="statistics"
                :class="
                  item.status === 'white'
                    ? 'bg_style1'
                    : item.status === 'yellow'
                    ? 'bg_style2'
                    : item.status === 'green'
                    ? 'bg_style3'
                    : item.status === 'flicker'
                    ? 'green_flicker'
                    : item.status === 'red'
                    ? 'bg_style4'
                    : ''
                "
              >
                <div class="title">
                  <p>{{ item.location_name }}</p>
                </div>
                <div class="info_container">
                  <span>零件号: {{ item.detailNo }}</span>
                  <span>零件数量: {{ item.detail_quantity }}</span>
                  <span>入库时间: {{ item.putUp_time }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="column2_3">
        <div class="column2_container">
          <el-row v-for="(item, index) in GuHaLocation.Column4" :key="index">
            <el-col :span="24">
              <div
                class="statistics"
                :class="
                  item.status === 'white'
                    ? 'bg_style1'
                    : item.status === 'yellow'
                    ? 'bg_style2'
                    : item.status === 'green'
                    ? 'bg_style3'
                    : item.status === 'flicker'
                    ? 'green_flicker'
                    : item.status === 'red'
                    ? 'bg_style4'
                    : ''
                "
              >
                <div class="title">
                  <p>{{ item.location_name }}</p>
                </div>
                <div class="info_container">
                  <span>零件号: {{ item.detailNo }}</span>
                  <span>零件数量: {{ item.detail_quantity }}</span>
                  <span>入库时间: {{ item.putUp_time }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="column3_container">
          <el-row v-for="(item, index) in GuHaLocation.Column5" :key="index">
            <el-col :span="24">
              <div
                class="statistics"
                :class="
                  item.status === 'white'
                    ? 'bg_style1'
                    : item.status === 'yellow'
                    ? 'bg_style2'
                    : item.status === 'green'
                    ? 'bg_style3'
                    : item.status === 'flicker'
                    ? 'green_flicker'
                    : item.status === 'red'
                    ? 'bg_style4'
                    : ''
                "
              >
                <div class="title">
                  <p>{{ item.location_name }}</p>
                </div>
                <div class="info_container">
                  <span>零件号: {{ item.detailNo }}</span>
                  <span>零件数量: {{ item.detail_quantity }}</span>
                  <span>入库时间: {{ item.putUp_time }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="column6_container">
        <el-row v-for="(item, index) in GuHaLocation.Column6" :key="index">
          <el-col :span="24">
            <div
              class="statistics"
              :class="
                item.status === 'white'
                  ? 'bg_style1'
                  : item.status === 'yellow'
                  ? 'bg_style2'
                  : item.status === 'green'
                  ? 'bg_style3'
                  : item.status === 'flicker'
                  ? 'green_flicker'
                  : item.status === 'red'
                  ? 'bg_style4'
                  : ''
              "
            >
              <div class="title">
                <p>{{ item.location_name }}</p>
              </div>
              <div class="info_container">
                <span>零件号: {{ item.detailNo }}</span>
                <span>零件数量: {{ item.detail_quantity }}</span>
                <span>入库时间: {{ item.putUp_time }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div> -->

      <div
        v-for="(Group, index) in GuHaLocation"
        :key="index"
        :class="['locationRow']"
        :style="{ width: Average }"
      >
        <div v-for="item in Group" :key="item.location_name">
          <div :class="LocationStatus(item)">
            <div class="title">
              <p>{{ item.location_name }}</p>
            </div>
            <div class="info_container">
              <span>零件号: {{ item.detailNo }}</span>
              <span>零件数量: {{ item.detail_quantity }}</span>
              <span>入库时间: {{ item.putUp_time }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { locationInfo, locationObject } from "@/api/api.js";
import { arrFilter } from "@/utils/filter.js";
export default {
  name: "LocationShow",
  data() {
    return {
      GuHaLocation: null,
      firstPutUp: null,
      greenTime: "",
      redTime: "",
      timer: null,
      transitionShow: false,
    };
  },
  computed: {
    LocationStatus() {
      return function(item) {
        console.log(item);
        let classRes = "";
        classRes =
          item.status === "white"
            ? "bg_style1"
            : item.status === "yellow"
            ? "bg_style2"
            : item.status === "green"
            ? "bg_style3"
            : item.status === "flicker"
            ? "green_flicker"
            : item.status === "red"
            ? "bg_style4"
            : "";
        return classRes + " statistics";
      };
    },
    Average() {
      let t = Object.keys(this.GuHaLocation).length;
      return 90 / t + "%";
    },
  },
  created() {
    if (localStorage.getItem("GuHaLocation")) {
      this.GuHaLocation = JSON.parse(localStorage.getItem("GuHaLocation"));
      this.loopLocation();
    } else {
      this.GuHaLocation = "";
    }
    this.greenTime = Number(localStorage.getItem("greenTime"));
    this.redTime = Number(localStorage.getItem("redTime"));
  },
  methods: {
    loopLocation() {
      this.transitionShow = false;
      if (localStorage.getItem("GuHaLocation")) {
        this.GuHaLocation = JSON.parse(localStorage.getItem("GuHaLocation"));
        console.log("loopLocation", this.GuHaLocation);

        for (let key in this.GuHaLocation) {
          this.getStatus(this.GuHaLocation[key]);
        }
        setTimeout(this.getArray, 2500);
        this.timer = setTimeout(this.loopLocation, 10000);
      } else {
        this.GuHaLocation = "";
      }
    },
    // 循环获取数据
    getStatus(list) {
      console.log("循环获取数据", list);
      list.forEach((item) => {
        locationInfo(item.location_name)
          .then((res) => {
            if (res.data.code === 0 && res.data.data.length > 0) {
              const result = res.data.data[0].location_id;
              this.$set(item, "location_id", result);
              locationObject(result)
                .then((res) => {
                  if (res.data.code === 0 && res.data.data.length !== 0) {
                    // console.log(`${item.location_name}库位上的托盘:`,res.data.data)
                    const results = res.data.data[0];
                    if (
                      results.extra_info &&
                      JSON.stringify(results.extra_info) !== "{}"
                    ) {
                      // console.log(results.extra_info)
                      // console.log(!results.extra_info)
                      // console.log(JSON.stringify(results.extra_info) === '{}')
                      this.$set(item, "detailNo", results.extra_info.part_no);
                      this.$set(
                        item,
                        "detail_quantity",
                        results.extra_info.part_num
                      );
                      const showTime = results.extra_info.storage_time.slice(5);
                      this.$set(item, "putUp_time", showTime);
                      const nowTime = new Date().getTime();
                      const resultTime = results.extra_info.storage_time;
                      const putUpTime = new Date(resultTime).getTime();
                      this.$set(item, "inTime", putUpTime);
                      const timeValue = nowTime - putUpTime;
                      console.log(nowTime, putUpTime);
                      // console.log(item)
                      // console.log('timeValue:', (timeValue)/(60*60*1000))
                      const timespan = (timeValue / (60 * 1000)).toFixed(0);
                      console.log(timespan);
                      if (timespan < this.greenTime) {
                        this.$set(item, "status", "yellow");
                        this.$set(item, "flag", "2");
                      }
                      if (
                        timespan >= this.greenTime &&
                        timespan <= this.redTime
                      ) {
                        this.$set(item, "status", "green");
                        this.$set(item, "flag", "1");
                      }
                      if (timespan > this.redTime) {
                        this.$set(item, "status", "red");
                        this.$set(item, "flag", "2");
                      }
                    } else {
                      this.$set(item, "status", "white");
                      this.$set(item, "flag", "2");
                    }
                  } else {
                    this.$set(item, "status", "white");
                    this.$set(item, "flag", "2");
                  }
                })
                .catch((err) => {
                  throw err;
                });
            }
          })
          .catch((error) => {
            throw error;
          });
      });
    },
    getArray() {
      this.firstPutUp = [];
      for (let k in this.GuHaLocation) {
        const arr = this.GuHaLocation[k].map((item) => {
          return item;
        });
        // console.log(arr)
        this.firstPutUp = this.firstPutUp.concat(arr);
      }
      const arrResult = this.firstPutUp.filter((item) => {
        if (item.flag === "1") {
          return item;
        }
      });
      if (arrResult.length > 0) {
        if (arrResult.length === 1) {
          this.getFlicker(arrResult[0].inTime, arrResult[0].detailNo);
        } else {
          const result2 = arrFilter(arrResult);
          result2.forEach((item) => {
            this.getFlicker(item.inTime, item.detailNo);
          });
        }
      }
      this.transitionShow = true;
    },
    getFlicker(timeVal, detailNo) {
      for (let k in this.GuHaLocation) {
        this.GuHaLocation[k].forEach((item) => {
          if (item.inTime === timeVal && item.detailNo === detailNo) {
            this.$set(item, "status", "flicker");
          }
        });
      }
      console.log(this.GuHaLocation);
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  },
};
</script>
<style lang="scss">
.location_container {
  .locationRow {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 15%;
  }
  width: 100%;
  height: 100%;
  padding: 10px 10px 10px 10px;
  display: flex;
  justify-content: space-between;
  .column1_container {
    width: 15%;
    height: 100%;
    // border: 1px solid rgb(88, 236, 13);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .column6_container {
    width: 15%;
    height: 100%;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .column2_3 {
    width: 30%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    .column2_container,
    .column3_container {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
    }
  }
  .el-row {
    height: 100%;
  }
  .statistics {
    color: white;
    height: 28vh !important;
    border-radius: 4px;
    padding: 0 1px;
    // opacity: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // text-align: left;
    p {
      font-size: 26px;
      font-weight: bold;
    }
    span {
      font-size: 20px;
      margin-top: 10px;
    }
    .info_container {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      // text-align: left;
    }
  }
  .bg_style7 {
    background: linear-gradient(90deg, #3dadf6, #737bfc);
    box-shadow: 0 10px 15px #737bfc;
  }
  .bg_style6 {
    background: linear-gradient(90deg, #ea677c, #ef9b5f);
    box-shadow: 0 10px 15px #ef9b5f;
  }
  .green_flicker {
    background: linear-gradient(90deg, #42d79b, #a6e25f);
    box-shadow: 0 10px 15px #a6e25f;
    animation: opacity-change 2s ease-in-out infinite;
    -webkit-animation: opacity-change 2s ease-in-out infinite;
    -moz-animation: opacity-change 2s ease-in-out infinite;
    -o-animation: opacity-change 2s ease-in-out infinite;
  }
  .bg_style3 {
    background: linear-gradient(
      90deg,
      rgba(66, 215, 155, 0.7),
      rgba(166, 226, 95, 0.7)
    );
    box-shadow: 0 10px 15px #a6e25f;
    // animation: opacity-change 2s ease-in-out infinite;
    // -webkit-animation: opacity-change 2s ease-in-out infinite;
    // -moz-animation: opacity-change 2s ease-in-out infinite;
    // -o-animation: opacity-change 2s ease-in-out infinite;
  }
  .bg_style8 {
    background: linear-gradient(90deg, #c1e3ff, #abc7ff);
    box-shadow: 0 10px 15px #abc7ff;
  }
  .bg_style1 {
    background: linear-gradient(
      90deg,
      rgba(217, 217, 217, 0.7),
      rgba(153, 153, 153, 0.7)
    );
    box-shadow: 0 10px 15px #d9d9d9;
  }
  .bg_style5 {
    background: linear-gradient(90deg, #2de2d7, #f9fea5);
    box-shadow: 0 10px 15px #f9fea5;
  }
  .bg_style4 {
    background: linear-gradient(
      90deg,
      rgba(255, 8, 68, 0.7),
      rgba(255, 177, 153, 0.7)
    );
    box-shadow: 0 10px 15px #ffb199;
  }
  .bg_style2 {
    background: linear-gradient(
      90deg,
      rgba(255, 215, 0, 0.7),
      rgba(255, 255, 0, 0.7)
    );
    box-shadow: 0 10px 15px #f9fea5;
  }
}
@keyframes opacity-change {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes opacity-change {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity-change {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes opacity-change {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
.show-enter-active {
  //boom 是过渡名称 in,out是两个动画，动画写到进入和离开结束的class中
  animation: in 1s;
}
.show-leave-active {
  animation: out 1s;
}
@keyframes in {
  //in动画
  0% {
    transform: scale(2);
    opactity: 0;
  }
  50% {
    transform: scale(1.5);
    opactity: 0.5;
  }
  100% {
    transform: scale(1);
    opactity: 1;
  }
}
@keyframes out {
  //out 动画
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opactity: 0;
  }
}
</style>
